<!DOCTYPE html>
<html>

<head>

</head>

<body>
    <canvas id="c" width="600" height="600"></canvas>
    <script src="./fabric.min.js"></script>
    <script>
        (function () {
            var canvas = this.__canvas = new fabric.Canvas('c');
            fabric.Object.prototype.transparentCorners = false;

            canvas.on('mouse:over', function (e) {
                e.target.set('fill', 'red');
                canvas.renderAll();
            });

            canvas.on('mouse:out', function (e) {
                e.target.set('fill', 'green');
                canvas.renderAll();
            });

            // add random objects
            for (var i = 15; i--;) {
                var dim = fabric.util.getRandomInt(30, 60);
                var klass = ['Rect', 'Triangle', 'Circle'][fabric.util.getRandomInt(0, 2)];
                var options = {
                    top: fabric.util.getRandomInt(0, 600),
                    left: fabric.util.getRandomInt(0, 600),
                    fill: 'green'
                };
                if (klass === 'Circle') {
                    options.radius = dim;
                }
                else {
                    options.width = dim;
                    options.height = dim;
                }
                canvas.add(new fabric[klass](options));
            }
        })();
    </script>
</body>

</html>